<template>
  <scroll-view class="apply-wrapper" :scroll-y="true">
    <view class="inner-wrapper">
      <form-build ref="form" :fields="fields" @change="onFormChange" />
      <view v-if="flowNodes.length > 0">
        <template v-for="(item, index) in flowNodes">
          <view
            v-if="item.nodeType === 'task'"
            :key="index"
            class="form-approval-item column"
          >
            <view
              class="form-approval-item-label"
              :class="{ disabled: !item.isOptional }"
            >{{ item.name }}({{ getType(item.activateType) }})</view>
            <view
              class="form-approval-item-content"
              :class="{ disabled: !item.isOptional }"
            >
              <approver
                :is-flow="true"
                :tabs="getTabs(item.chooseRange)"
                :range="item.choosePersons"
                :multiple="item.chooseIsMulti"
                :disabled="!item.isOptional"
                :value="getIds(item.roleIdShow, item.userIdShow)"
                :placeholder="`请选择${item.name}`"
                @change="onEmployeeChange($event, index)"
              />
            </view>
          </view>
          <view
            v-else-if="item.nodeType === 'notifier'"
            :key="index"
            class="form-approval-item column"
          >
            <view
              class="form-approval-item-label"
              :class="{ disabled: !item.isOptional }"
            >{{ item.name }}</view>
            <view
              class="form-approval-item-content"
              :class="{ disabled: !item.isOptional }"
            >
              <approver
                :is-flow="true"
                :tabs="getTabs(item.chooseRange)"
                :range="item.choosePersons"
                :multiple="item.chooseIsMulti"
                :disabled="!item.isOptional"
                :value="getIds(item.roleIdShow, item.userIdShow)"
                :placeholder="`请选择${item.name}`"
                @change="onEmployeeChange($event, index)"
              />
            </view>
          </view>
        </template>
        <button :disabled="loading" class="apply-btn" @tap="onSubmitApproval">
          提交审批
        </button>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import {
  getFlowReq,
  getFlowProcessByApproInfoReq,
  submitApprovalReq
} from "@/services/employee";
import FormBuild from "./FormBuild";
import Approver from "./FormBuild/components/Approver";
export default {
  onLoad(options) {
    this.flow_id = options.id;
    this.getFlow(this.flow_id);
  },
  components: {
    FormBuild,
    Approver
  },
  data() {
    return {
      flow_id: null,
      fields: [],
      flowNodes: [],
      loading: false
    };
  },
  methods: {
    onFormChange() {
      this.submit();
    },
    getFlow(flow_id) {
      getFlowReq(flow_id)
        .then(res => {
          this.fields = res;
        })
        .catch(err => {
          uni.showToast({
            title: err.message,
            icon: "none",
            duration: 2000
          });
        });
    },
    submit() {
      const formRes = this.$refs.form.getValues();
      if (formRes) {
        getFlowProcessByApproInfoReq({
          flowId: this.flow_id,
          userApproInfoList: formRes
        })
          .then(res => {
            this.flowNodes = res;
          })
          .catch(err => {
            console.log("debug log --> ", err);
            // uni.showToast({
            //   title: err.message,
            //   icon: 'none',
            //   duration: 2000
            // })
          });
      }
    },
    onEmployeeChange(val, idx) {
      const res = Object.assign({}, this.flowNodes[idx], val);
      this.flowNodes[idx] = res;
    },
    onSubmitApproval() {
      const formRes = this.$refs.form.getValues();
      if (formRes) {
        this.loading = true;
        submitApprovalReq({
          flowId: this.flow_id,
          userApproInfoList: formRes,
          flowNodeList: this.flowNodes
        })
          .then(res => {
            const timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 2000);
            uni.showToast({
              title: "审批提交成功",
              icon: "none",
              duration: 2000
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/approval/index?tab=1"
              });
            }, 1000);
          })
          .catch(err => {
            const timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 2000);
            console.log("debug log --> ", err);
            // uni.showToast({
            //   title: err.message,
            //   icon: 'none',
            //   duration: 2000
            // })
          });
      }
    },
    getTabs(range) {
      switch (range) {
        case "allUserAndRole":
          return ["employee", "admin", "role"];
        case "allUser":
          return ["employee", "admin"];
        case "limitUser":
          return ["employee"];
        case "allRole":
          return ["role"];
        case "limitRole":
          return ["role"];
        case "all":
          return ["employee", "admin", "role"];
        case "designated":
          return ["employee"];
        case "role":
          return ["role"];
        case "roleUser":
          return ["admin"];
        default:
          return [];
      }
    },
    getIds(roleIds, userIds) {
      let res = "";
      if (!!roleIds) {
        res = res + roleIds;
      }
      if (!!userIds) {
        if (!!res) {
          res = res + "," + userIds;
        } else {
          res = userIds;
        }
      }
      return res;
    },
    getType(key) {
      return ["依次审批", "会签", "或签"][key];
    }
  }
};
</script>
